<template>
  <view>
    <div class="box rounded-md m-3 gap-2 flex-col flex">

      <div class="m-3 gap-2 flex justify-between " style="font-size:large">
        <p class="text">反馈类型</p><uni-data-select class="uni-select" v-model="value" :localdata="range"
          @change="change"></uni-data-select>
      </div>

      <div class="m-3 gap-2 flex flex-col justify-between " style="font-size:large">
        <div>
          <p class="text">反馈说明</p>
        </div>
        <div>
          <uni-easyinput type="textarea" placeholder="请输入内容"></uni-easyinput>
        </div>
      </div>

      <div class="m-3 gap-2 flex flex-col justify-between " style="font-size:large">
        <div>
          <p class="text">上传图片</p>
        </div>
        <div class="m-2">
          <uni-file-picker limit="9" title="最多上传9张图片,请尽量保证图片清晰可见"></uni-file-picker>
        </div>
      </div>

      <div class="m-3 gap-2 flex flex-col justify-between " style="font-size:large">
        <div>
          <p class="text m-2">联系方式</p><uni-easyinput class="uni-mt-5" trim="all" placeholder="请输入联系方式，便于及时与您沟通"
            @input="input"></uni-easyinput>

        </div>
      </div>

      <div class="m-3 gap-2 flex flex-col justify-between " style="font-size:large">
        <button class="button1 justify-between items-center rounded-md z-10 m-2" @touchend="handleSwitch">
          提交
        </button>

      </div>

    </div>


  </view>
</template>

<script>

export default {
  data() {
    return {
      value: 0,
      range: [
        { value: 0, text: "请选择反馈类型" },
        { value: 1, text: "订单问题" },
        { value: 2, text: "其他问题" },
      ],
    };
  },
  methods: {
    handleSwitch() {
      uni.switchTab({ url: '/pages/user/user' })
    },
    change(e) {
      console.log("e:", e);
    },
  },
};
</script>


<style lang="scss">
.uni-select {
  width: 50%;
}

.text {
  font-size: medium;
}

.button1 {
  color: white;
  background: blue;
  font-size: large;
}
</style>